<!--
 * @Autor: Ruohong Yu
 * @Date: 2023-03-31 10:59:37
 * @Description: file content
 * @FilePath: \ebook\src\components\login\Register.vue
-->
<template>
  <div class="login">
    <div class="bg-setting"></div>
    <div class="login-wrapper">
      <!-- 左侧的注册盒子 -->
      <div class="login-left">
        <div class="title">Ybook Reader</div>
        <div class="userbox">
          <div class="usericon icon"></div>
          <input  class="user" id="user"  v-model="username" @blur="userUsed" placeholder="用户名">
          <div class="error_tip" v-show="userError">{{userErrorText}}</div>
        </div>
        <div class="emailbox">
          <div class="emailicon icon"></div>
          <input class="user" id="email"  v-model="email" @blur="emailUsed" placeholder="邮箱">
          <div class="error_tip ema_tip" v-show="emailError">{{emailErrorText}}</div>
        </div>
        <div class="pwdbox">
          <div class="pswicon icon"></div>
          <input  class="pwd"  id="password" v-model="password" @blur="pwdUsed" type="password"  placeholder="密码">
          <div class="error_tip pwd_tip" v-show="pwdError">*密码必须包含大小写字母和数字，不能使用特殊字符，长度在8-20之间</div>
        </div>
        <div class="log-box">
          <button type="primary" class="login_btn" @click="gotoLogin">返回登录</button>
          <button type="primary" class="login_btn" @click="needRegister">注册账号</button>
        </div>
      </div>
      <!-- 右侧的注册盒子 -->
      <div class="login-right">
        <div class="title">Welcome To Ybook Reader</div>
      </div>
    </div>
    <toast :text="toastText" ref="toast"></toast>
  </div>
</template>

<script>
import crypto from '@/utils/crypto'
import { register } from '../../api/user'
import Toast from '../common/Toast.vue'
export default {
  data () {
    return {
      username: '',
      userError: false,
      userErrorText: '',
      password: '',
      pwdError: false,
      toastText: '',
      email: '',
      emailError: false,
      emailErrorText: ''
    }
  },
  components: { Toast },
  methods: {
    gotoLogin () {
      this.$router.push({
        path: '/login'
      })
    },
    needRegister () {
      if (this.username === '') {
        this.userErrorText = '*用户名只能由数字、英文或下划线组成，长度在2-10之间'
        this.userError = true
      }
      if (this.password === '') {
        this.pwdError = true
      }
      if (this.email === '') {
        this.emailErrorText = '*不是有效邮箱'
        this.emailError = true
      }
      if (!this.userError && !this.pwdError && !this.emailError) {
        const pwd = crypto.Encrypt(this.password)
        register(this.username, pwd, this.email).then(res => {
          if (res.data.status === 0) {
            this.toastText = '注册成功，去登录'
            this.$refs.toast.updateText('注册成功，去登录')
            this.$refs.toast.show()
          } else if (res.data.status === 2) {
            this.userErrorText = '用户名已存在'
            this.userError = true
          } else {
            this.toastText = '抱歉，注册失败'
            this.$refs.toast.updateText('抱歉，注册失败')
            this.$refs.toast.show()
          }
        })
      }
    },
    userUsed () {
      if (!/^\w{2,10}$/.test(this.username)) {
        this.userErrorText = '*用户名只能由数字、英文或下划线组成, 长度在2-10之间'
        this.userError = true
      } else {
        this.userError = false
      }
    },
    emailUsed () {
      if (!/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
        .test(this.email)) {
        this.emailErrorText = '*不是有效邮箱'
        this.emailError = true
      } else {
        this.emailError = false
      }
    },
    pwdUsed () {
      if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,20}$/.test(this.password)) {
        this.pwdError = true
      } else {
        this.pwdError = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (min-width: 768px){
  .login{
    background-image:url('../../assets/images/loginbg.png');
    width: 100%;
    height: 100%;
    .bg-setting{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #0b5137d8;
    }
    .login-wrapper{
      display:flex;
      position:absolute;
      width:px2rem(700);
      height:px2rem(400);
      border-radius: 12px;
      overflow: hidden;
      top:40%;
      left:50%;
      transform: translate(-50%,-50%);
      box-shadow: 0 12px 16px 0  rgba(0,0,0,0.24), 0 17px 50px 0 #4E655D;
      .login-left{
        position: relative;
        background-color:#fff;
        width:px2rem(220);
        .title{
          position: absolute;
          top: px2rem(40);
          left: px2rem(30);
          width: 100%;
          font-size: px2rem(20);
          background-image: -webkit-linear-gradient(right bottom, #3D867F, #67B9C1, #FD4804);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        input{
          outline-style: none ;
          border: 0;
          border-bottom:1px solid #E9E9E9;
          border-radius: px2rem(5);
          background-color:#F8F8F8;
          padding-left: px2rem(2);
          height:px2rem(20);
          width: 100%;
          font-family:sans-serif;
          font-size:px2rem(10);
          color:#89AB9E;
        }
        input::-webkit-input-placeholder{
            color:#0b5137;
        }
        input:focus{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:hover{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:-webkit-autofill {
          /* 修改默认背景框的颜色 */
          box-shadow: 0 0 0px px2rem(1000)  #89AB9E inset !important;
          /* 修改默认字体的颜色 */
          -webkit-text-fill-color: #445b53;
        }
        input:-webkit-autofill::first-line {
          /* 修改默认字体的大小 */
          font-size: px2rem(10);
          /* 修改默认字体的样式 */
          font-weight:bold;
        }
        .icon{
          display:inline-block;
          width:px2rem(15);
          height:px2rem(15);
          margin-right: px2rem(5);
          margin-left: px2rem(5);
          margin-top: px2rem(5);
        }
        .usericon{
          background:url('../../assets/images/username.png') no-repeat center;
          background-size:contain;
        }
        .pswicon{
          background:url('../../assets/images/password.png') no-repeat center;
          background-size:contain;
        }
        .emailicon{
          background:url('../../assets/images/email.png') no-repeat center;
          background-size:contain;
        }
        .error_tip{
          position: absolute;
          top: px2rem(145);
          left: px2rem(24);
          color: rgb(156, 0, 0);
          width: px2rem(150);
          font-size: px2rem(8);
        }
        .pwd_tip{
          top: px2rem(232);
        }
        .ema_tip{
          top: px2rem(190);
        }
        .userbox{
          margin-top:px2rem(120);
          height:px2rem(30);
          width:100%;
          display: flex;
        }
        .pwdbox{
          height:px2rem(30);
          width:100%;
          display: flex;
          margin-top: px2rem(15);
        }
        .emailbox{
          margin-top:px2rem(15);
          height:px2rem(30);
          width:100%;
          display: flex;
        }
        .log-box{
          font-size:px2rem(12);
          display: flex;
          justify-content: space-between ;
          width:100%;
          margin-top: px2rem(25);
          color:#4E655D;
          .login_btn{
            flex: 1;
            margin: 0 px2rem(8);
            background-color: #5f8276;
            border: none;
            color: #FAFAFA;
            padding: px2rem(5);
            text-align: center;
            text-decoration: none;
            font-size: px2rem(13);
            border-radius: px2rem(12);
            outline:none;
            &:hover{
              box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
              cursor: pointer;
              background-color: #0b5137;
              transition: all 0.2s ease-in;
            }
          }
        }
      }
      .login-right{
        width:px2rem(500);
        background-image:url('../../assets/images/loginbg.png');
        background-size:cover;
        font-family:sans-serif;
        .title{
          color: #fff;
          margin-top:px2rem(320);
          margin-left: px2rem(20);
          font-weight:bold;
          font-size:px2rem(20);
        }
        .title:hover{
          font-size:px2rem(21);
          transition: all 0.4s ease-in-out;
          cursor: pointer;
        }
      }
    }
  }
}

@media only screen and (max-width: 767px){
  .login{
    background-image:url('../../assets/images/loginbg.png');
    width: 100%;
    height: 100%;
    .bg-setting{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #0b5137d8;
    }
    .login-wrapper{
      display:flex;
      position:absolute;
      width:80%;
      height:px2rem(400);
      border-radius: 12px;
      overflow: hidden;
      top:40%;
      left:50%;
      transform: translate(-50%,-50%);
      box-shadow: 0 12px 16px 0  rgba(0,0,0,0.24), 0 17px 50px 0 #4E655D;
      .login-left{
        position: relative;
        background-color:#fff;
        width:100%;
        .title{
          position: absolute;
          top: px2rem(40);
          left: px2rem(85);
          width: 100%;
          font-size: px2rem(20);
          background-image: -webkit-linear-gradient(right bottom, #3D867F, #67B9C1, #FD4804);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        input{
          outline-style: none ;
          border: 0;
          border-bottom:1px solid #E9E9E9;
          border-radius: px2rem(5);
          background-color:#F8F8F8;
          padding-left: px2rem(2);
          height:px2rem(20);
          width: 100%;
          font-family:sans-serif;
          font-size:px2rem(10);
          color:#89AB9E;
        }
        input::-webkit-input-placeholder{
            color:#0b5137;
        }
        input:focus{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:hover{
          border-bottom:2px solid #445b53;
          background-color:transparent;
          transition: all 0.2s ease-in;
          font-family:sans-serif;
          color:#445b53;
        }
        input:-webkit-autofill {
          /* 修改默认背景框的颜色 */
          box-shadow: 0 0 0px px2rem(1000)  #89AB9E inset !important;
          /* 修改默认字体的颜色 */
          -webkit-text-fill-color: #445b53;
        }
        input:-webkit-autofill::first-line {
          /* 修改默认字体的大小 */
          font-size: px2rem(10);
          /* 修改默认字体的样式 */
          font-weight:bold;
        }
        .icon{
          display:inline-block;
          width:px2rem(15);
          height:px2rem(15);
          margin-right: px2rem(5);
          margin-left: px2rem(5);
          margin-top: px2rem(5);
        }
        .usericon{
          background:url('../../assets/images/username.png') no-repeat center;
          background-size:contain;
        }
        .pswicon{
          background:url('../../assets/images/password.png') no-repeat center;
          background-size:contain;
        }
        .emailicon{
          background:url('../../assets/images/email.png') no-repeat center;
          background-size:contain;
        }
        .error_tip{
          position: absolute;
          top: px2rem(145);
          left: px2rem(24);
          color: rgb(156, 0, 0);
          width: 90%;
          font-size: px2rem(8);
        }
        .pwd_tip{
          top: px2rem(232);
        }
        .ema_tip{
          top: px2rem(190);
        }
        .userbox{
          margin-top:px2rem(120);
          height:px2rem(30);
          width:100%;
          display: flex;
        }
        .pwdbox{
          height:px2rem(30);
          width:100%;
          display: flex;
          margin-top: px2rem(15);
        }
        .emailbox{
          margin-top:px2rem(15);
          height:px2rem(30);
          width:100%;
          display: flex;
        }
        .log-box{
          font-size:px2rem(12);
          display: flex;
          justify-content: space-between ;
          width:100%;
          margin-top: px2rem(25);
          color:#4E655D;
          .login_btn{
            flex: 1;
            margin: 0 px2rem(8);
            background-color: #5f8276;
            border: none;
            color: #FAFAFA;
            padding: px2rem(5);
            text-align: center;
            text-decoration: none;
            font-size: px2rem(13);
            border-radius: px2rem(12);
            outline:none;
            &:hover{
              box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
              cursor: pointer;
              background-color: #0b5137;
              transition: all 0.2s ease-in;
            }
          }
        }
      }
      .login-right{
        overflow:hidden;
        opacity:0;
        visibility:hidden;
        display:none;
        position:absolute;
        z-index:-1000;
        transform:scaleY(0);
      }
    }
  }
}
</style>
